<template>
  <el-container>
    <el-aside width="350px">
      <el-tabs type="border-card">
        <el-tab-pane label="源数据">
          <div  class="text item" style=" display: flex; justify-content: end;">
            <el-button size="mini" type="text" @click="srcRun">运行</el-button>
          </div>
          <el-form :model="srcParameter" :rules="srcRules" ref="srcParameter">
            <el-form-item prop="srcTable" label="目标数据">
              <el-input  v-model="srcParameter.srcTable" autocomplete="off" placeholder="目标数据"></el-input>
            </el-form-item>
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="数据刻度化">
          <div  class="text item" style=" display: flex; justify-content: end;">
            <el-button size="mini" type="text" @click="measureRun">运行</el-button>
          </div>
          <el-form :model="trendsRouteParameter" :rules="trendsRules" ref="trendsRouteParameter">
            <el-form-item prop="srcTable" label="目标数据">
              <el-input  v-model="trendsRouteParameter.srcTable" autocomplete="off" placeholder="目标数据"></el-input>
            </el-form-item>
            <el-form-item prop="measureStartField" label="起始刻度字段">
              <el-input  v-model="trendsRouteParameter.measureStartField" autocomplete="off" placeholder="事件表的起始刻度字段" ></el-input>
            </el-form-item>
            <el-form-item prop="measureEndField" label="终止刻度字段">
              <el-input  v-model="trendsRouteParameter.measureEndField" autocomplete="off" placeholder="事件表的终止刻度字段" ></el-input>
            </el-form-item>        
          </el-form>
        </el-tab-pane>
        <el-tab-pane label="动态分段">
          <div  class="text item" style=" display: flex; justify-content: end;">
            <el-button size="mini" type="text" @click="run">运行</el-button>
          </div>
          <el-form :model="parameter" :rules="rules" ref="parameter">
            <el-form-item prop="srcTable" label="目标数据">
              <el-input  v-model="parameter.srcTable" autocomplete="off" placeholder="目标数据"></el-input>
            </el-form-item>
            <el-form-item prop="measureStartField" label="起始刻度字段">
              <el-input  v-model="parameter.measureStartField" autocomplete="off" placeholder="事件表的起始刻度字段" ></el-input>
            </el-form-item>
            <el-form-item prop="measureEndField" label="终止刻度字段">
              <el-input  v-model="parameter.measureEndField" autocomplete="off" placeholder="事件表的终止刻度字段" ></el-input>
            </el-form-item>
            <el-form-item prop="sectionStartField" label="开始分段字段">
              <el-input  v-model="parameter.sectionStartField" autocomplete="off" placeholder="开始分段字段" ></el-input>
            </el-form-item>
            <el-form-item prop="sectionStartField" label="结束时分段字段">
              <el-input  v-model="parameter.sectionEndFiled" autocomplete="off" placeholder="结束时分段字段"></el-input>
            </el-form-item>           
          </el-form>
        </el-tab-pane>
      </el-tabs>      
    </el-aside>
    <el-main>
      <div class="mapbox-maps">
        <div id="map">      
        </div> 
      </div>   
    </el-main>
  </el-container>  
</template>
<script>
export default{
    name:'PostgisTrendsSection',
    data(){
      return{        
        drawer: false,
        map:{},
        geojson: {        
          type:'geojson',
          data:{
          "type": "FeatureCollection",
          "features":[]
          }
        },
        srcParameter:{
          srcTable:"trends_section",//原始数据
          measureStartField: 10,// 事件表的起始刻度字段
          measureEndField:40,// 事件表的终止刻度字段
        },
        trendsRouteParameter:{
          srcTable:"trends_section_route",//原始数据
          measureStartField: 10,// 事件表的起始刻度字段
          measureEndField:40,// 事件表的终止刻度字段
        },
        parameter:{
          srcTable:"trends_section",//原始数据
          routeTable:"trends_section_route",// 路由数据集
          routeIDField:"RouteID",// 路由数据集的标识字段,即路由ID
          eventTable: "LinearEventTabDT@Changchun",// 用于生成空间数据的事件表名
          eventRouteIDField:"RouteID",// 用于生成空间数据的事件表的路由标识字段
          measureField: "",// 用于生成空间数据的事件表的刻度字段
          measureStartField: 10,// 事件表的起始刻度字段
          measureEndField:40,// 事件表的终止刻度字段
          sectionStartField:12,//开始分段字段
          sectionEndFiled:15,//结束时分段字段
        },  
        srcRules: {
          srcTable: [
            { required: true, message: '请输入原始数据', trigger: 'blur' },
          ]
        },  
        trendsRules: {
          srcTable: [
            { required: true, message: '请输入原始数据', trigger: 'blur' },
          ],
          measureStartField: [
            { required: true, message: '请输入事件表的起始刻度字段值', trigger: 'blur' },
          ],
          measureEndField: [
            { required: true, message: '请输入事件表的终止刻度字段值', trigger: 'blur' },
          ]
        },   
        rules: {
          srcTable: [
            { required: true, message: '请输入原始数据', trigger: 'blur' },
          ],
          measureStartField: [
            { required: true, message: '请输入事件表的起始刻度字段值', trigger: 'blur' },
          ],
          measureEndField: [
            { required: true, message: '请输入事件表的终止刻度字段值', trigger: 'blur' },
          ],
          sectionStartField: [
            { required: true, message: '请输入开始分段字段值', trigger: 'blur' },
          ],
          sectionEndFiled: [
            { required: true, message: '请输入结束时分段字段值', trigger: 'blur' },
          ],
        },
      
      }
    },
    mounted() {
      this.loadMap()
    },
    beforeDestroy(){
      this.map.remove()

    },
    methods:{
        
      loadMap() {
        // 英文标注转换为中文   
        // mapboxgl.setRTLTextPlugin(
        //   "https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-rtl-text/v0.1.0/mapbox-gl-rtl-text.js"
        // );
        this.map =  new mapboxgl.Map({
          accessToken: 'pk.eyJ1Ijoienh0d24iLCJhIjoiY2wzanV3bHduMTZwejNrcXcyd3B1bzBieiJ9.aW_TDqLomftwPvBu7OWqwQ',
          container: 'map',
          style: 'mapbox://styles/mapbox/outdoors-v10', // stylesheet location
          center: [116.790202563,32.656293335], // starting position [lng, lat]
          zoom: 12, // starting zoom
          hash: false,
          //pitch: 45,  //地图的角度，不写默认是0，取值是0-60度，一般在3D中使用
          bearing: 0, //地图的初始方向，值是北的逆时针度数，默认是0，即是正北
          antialias: true, //抗锯齿，通过false关闭提升性能
          projection: "globe",
        })
        // 设置语言
        // var language = new MapboxLanguage({ defaultLanguage: "zh" });
        // this.map.addControl(language);

        //地图导航
        var nav = new mapboxgl.NavigationControl();
        this.map.addControl(nav, 'top-right');

        // 比例尺
        var scale = new mapboxgl.ScaleControl({
            maxWidth: 100,
            unit: "metric"
        });
        this.map.addControl(scale,"bottom-left");

        // 全图
        this.map.addControl(new mapboxgl.FullscreenControl());
        // 定位
        this.map.addControl(
            new mapboxgl.GeolocateControl({
            positionOptions: {
                enableHighAccuracy: true
            },
            trackUserLocation: true
            })
        );
        let that = this;
        this.map.on('load',function () {
          that.map.setFog({
              color: "rgb(186, 210, 235)",
              'high-color': 'rgb(36, 92, 223)', 
              'horizon-blend': 0.02, 
              'space-color': 'rgb(11, 11, 25)', 
              'star-intensity': 0.6 
          });

          that.map.addSource('src_trendsSection',that.geojson) //获取原始线数据
          that.map.addSource('trendsSection_route',that.geojson) //获取路由线数据
          that.map.addSource('locateBetween',that.geojson) //开始分段

            that.map.addLayer({
              "id": "tsrc_trendsSection_line",
              "type": "line",
              "source": "src_trendsSection",              
              "layout": {
                "visibility": "visible",			
              },
              "paint": {
                "line-opacity": 1,
                "line-color": "#007799",
                "line-width": 3,				
              }
              
            });
            that.map.addLayer({
              "id": "locateBetween_line",
              "type": "line",
              "source": "locateBetween",              
              "layout": {
                "visibility": "visible",			
              },
              "paint": {
                "line-opacity": 1,
                "line-color": "#F39C19",
                "line-width": 3,				
              }
              
            });
            that.map.addLayer({
                id: "trendsSection_route",
                type: "circle",
                source: "trendsSection_route",
                paint: {
                  "circle-radius": 2,
                  "circle-color": "#fff",
                }
              
            });  
            that.map.addLayer({
              "id": "trendsSection_route_text",
              "type": "symbol",
              "source": "trendsSection_route",              
              "layout": {
                "visibility": "visible",			
                'text-field': '{mm}',		
                'text-size': 12
              },
              paint: {
                'text-halo-color': '#0000FF',
                //'text-halo-width': 2
              }                
            })       
         
        })
        this. map.on("click", (e) => {
          console.log(e)       
        });          
      },     
      
      /**
       * 获取源数据
       */
      srcRun(){
        let that = this
        that.$refs["srcParameter"].validate((valid) => {       
          if (valid) {
            let that = this            
            let fd =  new URLSearchParams()
            fd.append("srcTable",that.srcParameter.srcTable)            
            let url = "/analysis/trendsSection"
            that.$axios.post(url, fd)       
            .then(function (res) {          
              console.log(res)
              let features = []
              res.data.data.forEach(e=>{
              let geom = JSON.parse(e.row_to_json.value)    
              features=geom.features	
              
              })
              that.map.getSource('src_trendsSection').setData({
                  "type": "FeatureCollection",
                  "features":[]
              })
              that.map.getSource('src_trendsSection').setData({
                  "type": "FeatureCollection",
                  "features":features
              })
            })
            .catch(function (error) {       
              console.log(error);
            })             
          } else {
            console.log('error submit!!');
            return false;
          }
        });

      },
      /**
       * 加载刻度数据
       * 
       */
      measureRun(){
        let that = this
        that.$refs["trendsRouteParameter"].validate((valid) => {       
          if (valid) {
            let that = this           
            let fd =  new URLSearchParams()
            fd.append("srcTable",that.trendsRouteParameter.srcTable)
            fd.append("measureStartField", that.trendsRouteParameter.measureStartField)
            fd.append("measureEndField", that.trendsRouteParameter.measureEndField)            
            let url = "/analysis/trendsSection/route"
            that.$axios.post(url, fd)       
            .then(function (res) {          
              console.log(res)
              let features = []
              res.data.data.forEach(e=>{
              let geom = JSON.parse(e.row_to_json.value)    
              features=geom.features	
              
              })
              that.map.getSource('trendsSection_route').setData({
                  "type": "FeatureCollection",
                  "features":[]
              })
              that.map.getSource('trendsSection_route').setData({
                  "type": "FeatureCollection",
                  "features":features
              })
            })
            .catch(function (error) {       
              console.log(error);
            })             
          } else {
            console.log('error submit!!');
            return false;
          }
        });             
      },
      /**
       * 加载动态分段数据
       * 
       */
      run(){
        let that = this
        that.$refs["parameter"].validate((valid) => {       
          if (valid) {
            let that = this           
            let fd =  new URLSearchParams()
            fd.append("srcTable",that.parameter.srcTable)
            fd.append("measureStartField", that.parameter.measureStartField)
            fd.append("measureEndField", that.parameter.measureEndField)
            fd.append("sectionStartField", that.parameter.sectionStartField)
            fd.append("sectionEndFiled", that.parameter.sectionEndFiled)
            let url = "/analysis/trendsSection/locateBetween"
            that.$axios.post(url, fd)       
            .then(function (res) {          
              console.log(res)
              let features = []
              res.data.data.forEach(e=>{
              let geom = JSON.parse(e.row_to_json.value)    
              features=geom.features	
              
              })
              that.map.getSource('locateBetween').setData({
                  "type": "FeatureCollection",
                  "features":[]
              })
              that.map.getSource('locateBetween').setData({
                  "type": "FeatureCollection",
                  "features":features
              })
            })
            .catch(function (error) {       
              console.log(error);
            })             
          } else {
            console.log('error submit!!');
            return false;
          }
        });             
      },
      
    }
}

</script>
<style scoped lang="scss">
 @import "../../../public/mapbox/mapbox-gl.css";
 .mapbox-maps {
    width: 100%;
    height: calc(100vh - 50px);
    position: relative;
    #map {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        bottom:0;
        right: 0;        
    }
    
}
.mapboxgl-canvas {
    outline: none;
}
  /* 隐藏mapbox商标 */
.mapboxgl-ctrl-logo {
    display: none;
} 
.el-aside {
    overflow: auto;
    box-sizing: border-box;
    flex-shrink: 0;
    width: 200px;
    // border: 1px solid red;
    line-height: 19px;
    padding: 10px;
    text-align: left;
}
.jv-container .jv-code.boxed {
    max-height: 100%;
}
</style>